<template>
  <div class="setting-card-item" :style="style" :class="{ 'setting-card-item-border': border }">
    <div class="title">
      {{ title }}
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useThemeStore } from "@/stores/theme"

defineProps({
  title: {
    type: String,
    required: true
  },
  border: {
    type: Boolean,
    required: false,
    default: true
  }
})

const style = useThemeStore().getThemeType(
  { "--setting-card-item-border-color": "#777" },
  { "--setting-card-item-border-color": "#ddd" }
)
</script>

<style scoped lang="scss">
.setting-card-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0;
  min-height: 0.4rem;

  .title {
    font-size: 0.12rem;
  }

  .content {
    height: 100%;
  }
}

.setting-card-item-border {
  border-bottom: 1px solid var(--setting-card-item-border-color);
}
</style>
